<template>
  <div class="questions-preview">
    <el-dialog title="题目预览" :visible="dialogVisible" :modal-append-to-body="false" @close="close">
      <el-row type="flex" align="center" class="preview">
        <el-col :span="6">【题型】:{{ list.questionType | dealquestionType }}</el-col>
        <el-col :span="6">【编号】:{{ list.subjectID }}</el-col>
        <el-col :span="6">【难度】:{{ list.difficulty | dealdifficulty }}</el-col>
        <el-col :span="6">【标签】:{{ list.tags }}</el-col>
      </el-row>
      <el-row type="flex" align="center" class="preview preview-bottom">
        <el-col :span="6">【学科】:{{ list.subjectName }}</el-col>
        <el-col :span="6">【目录】:{{ list.catalogID }}</el-col>
        <el-col :span="6">【方向】:{{ list.direction }}</el-col>
      </el-row>
      <el-row class="preview" style="padding-bottom: 0">
        <el-col :span="24" v-html="`【题干】${list.question}`"></el-col>
      </el-row>
      <el-row class="preview-newBottom">
        <el-col :span="24">选项: (以下选项为正确答案)</el-col>
        <div>
          <el-radio-group v-model="radio">
            <el-radio v-for="item in list.options" :key="item.code" :label="item.code">:{{ item.title }}</el-radio>
          </el-radio-group>
        </div>
      </el-row>
      <el-row class="preview preview-newBottom">
        <el-col :span="24">
          【参考答案】:
          <el-button type="danger" @click="show = true">视频答案预览</el-button>
          <video v-if="show" preload="auto" autoplay class="video-js" controls="controls">
            <source src="https://v-cdn.zjol.com.cn/277003.mp4" type="video/mp4" />
          </video>
        </el-col>
      </el-row>
      <el-row class="answer" v-html="`答案解析${list.answer }`">【答案解析】:</el-row>
      <el-row class="title">【题目备注】:{{ list.remarks }}</el-row>
      <el-row type="flex" justify="end" align="center">
        <el-button type="primary" @click="close">关闭</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { difficulty, questionType } from '@/api/hmmm/constants'
import { dealType } from '@/api/hmmm/questions-all'
export default {
  created () {
    console.log(this.list)
    console.log(questionType)
    if (this.list) {
      console.log(this.list)
      const newArr = [...this.list.options]
      newArr.forEach((item) => {
        if (item.isRight === 1) {
          this.radio = item.code
        }
      })
    }
  },
  data () {
    return {
      radio: '',
      player: null,
      show: false
    }
  },
  filters: {
    dealdifficulty (val) {
      return dealType(val, difficulty)
    },
    dealquestionType (val) {
      return dealType(val, questionType)
    }
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    list: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    close () {
      this.$emit('update:dialogVisible', false)
    }
  }
}
</script>

<style scoped lang='scss'>
.questions-preview {
  .preview {
    padding: 15px 0;
  }
  .preview-bottom {
    border-bottom: 1px solid #000;
  }
  .preview-newBottom {
    padding-bottom: 15px;
    border-bottom: 2px solid rgb(160, 151, 151);
  }
  .answer {
    padding: 5px 0;
    border-bottom: 2px solid rgb(160, 151, 151);
  }
  .title {
    padding-top: 5px;
    height: 100px;
  }
}
</style>
